<template>
	<view>
		<view class="flex align-center" style="height: 100rpx;">
			<text 
			v-for="(item,index) in tab"
			:key="index"
			class="flex-1 flex align-center justify-center"
			@click="tabClick(index)"
			:class="tabIndex === index ? 'font-lg text-main font-weight-bold' : 'font-md'"
			>
				{{item.name}}<text class="ml-1" v-if="item.num">{{item.num}}</text>
			</text>
		</view>
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
		:style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'"
				@scrolltolower="loadmore(index)">
				
					<template v-if="item.list.length > 0">
						<!-- 列表 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<userList :item='item2' :index="index2"></userList>
						</block>
						<!-- 上拉加载 -->
						<load-more v-if="item.list.length > 10" :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 1, // 女
			age: 25,
			isFollow: true
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
		{
			avatar: '/static/default.jpg',
			username: '昵称',
			sex: 2, // 女
			age: 25,
			isFollow: false
		},
	];
	import loadMore from '@/components/common/loadmore.vue';
	import nothing from '@/components/common/nothing.vue';
	import userList from '@/components/users-list/users-list.vue'
	export default {
		components:{loadMore,nothing,userList},
		data() {
			return {
				tab:[{
					name:'互关',
					num: 0
				},{
					name:'关注',
					num: 2
				},{
					name:'粉丝',
					num: 1
				}],
				newsList: [],
				scrollH: 600,
				// 顶部选项卡
				scrollInto:'',
				// 顶部选项卡激活序号
				tabIndex: 0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			}),
			this.loadList()
		},
		// 监听点击输入框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'../search/search?type=user'
			})
		},
		// 点击导航栏返回上一级
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta:1
			})
		},
		methods:{
			tabClick(index) {
				this.tabIndex = index
			},
			// 监听滑动
			onChangeTab(e) {
				// 与顶部选项卡关联
				this.tabIndex = e.detail.current
			},
			// 将单列数据循环 让每个顶部选项卡都有对应的数据
			loadList() {
				let arr = []
				for(let i = 0; i < this.tab.length; i++) {
					let obj = {
						// 上拉加载更多
						loadmore:'上拉加载更多',
						// 文章列表元素
						list:[]
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 点击tab栏
			changeTab(index) {
				if (index === this.tabIndex) {
					return
				} else {
					this.tabIndex = index
					// scrollInto要和前面定义的id一致 滚动到指定元素
					this.scrollInto = 'tab' + index
				}
			},
			// 加载更多 模拟获取后台数据
			loadmore(index) {
				let item = this.newsList[index]
				// 判断是否处于可加载状态
				if (item.loadmore !== '上拉加载更多') return
				item.loadmore = '加载中'
				setTimeout(() => {
					item.list = [...item.list, ...item.list]
					item.loadmore = '上拉加载更多'
				}, 1000)
			}
		}
	}
</script>

<style>
</style>
